<script setup>
import { useProjectDetail } from 'api/project';
import { onMounted, ref, computed, watch, watchEffect, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
//初始化
import useSearchProjecValue from "../hooks/useSearchProjecValue";
import Loading from '../components/Loading.vue';
import useLoadData from '../hooks/useLoadData';
import { manager } from '../api/member';
import { getRecruitByRid } from '../api/recruit';
import Card from '../components/Card.vue';
import RecruitCard from '../components/RecruitCard.vue';
import { getProjectBypid } from '../api/project';
import ProjectCard from '../components/ProjectCard.vue';
import { addApply } from '../api/apply';
const route = useRoute()
const router = useRouter()
const { statusOption, typeOption } = useSearchProjecValue()
const { isError, isLoading, data: info } = useLoadData(getRecruitByRid(route.params.rid))
const getStatusText = computed(() => info.value.status != undefined ? statusOption.find(x => x.value == info.value.status).text : '')
const getTypeText = computed((() => info.value.status != undefined ? typeOption.find(x => x.value == info.value.type).text : ''))
const project = ref(null)
watchEffect(()=>{
    if(info.value){
        getProjectBypid(info.value.pid).then(res=>{
            project.value = res.data
        })
    }
})
const applyHandle = ()=>{
	addApply({
		rid:route.params.rid,
	})
}
</script>
<template>
	<Loading :is-error="isError" :is-loading="isLoading" id="bj">
			<!-- 设定div布局方式为flex -->
			<div class="top">
				<div class="header">
					<!-- 头部 -->
					<div >
						<div class="title">{{ info.title }}</div>
					</div>
					<div class="tb">
						<img class="icon" src="../assets/NotCollected.svg" />
						<img class="icon" src="../assets/report.svg" />
					</div>
				</div>
				<div class="bq">
					<div>
						<van-tag v-for="item, index in info.tags.split(' ')" color="var(--light-color)">{{ item }}</van-tag>
					</div>
                    <router-link :to="'/user/' + info.creator_uid" class="fbr">
						<div class="creator-name">{{ info.creator_name }}</div>
						<van-image round width="25" height="25" fit="cover" :src="info.creator_avatar" />
					</router-link>
				</div>
			</div>
            <div class="bottom">
                <Card style="margin-bottom: 20px;">
                    {{info.introduce}}
                </Card>
                <ProjectCard v-if="project" :data="project"></ProjectCard>
            </div>
            <div class="button">
                <van-button block round color="var(--main-color)" style="width:calc(100% - var(--page-padding)*2);margin: 0 auto;" @click="applyHandle">申请加入</van-button>
            </div>
	</Loading>
</template>
<style scoped>
#bj {
	background: var(--main-background-color);
	min-height: 100%;
    position: relative;
}
.top {
	background: white;
	padding: 15px;
	border-radius: 20px;

}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.title {
	font-weight: bold;
	font-size: 15px;
}
.van-tag {
	margin: 5px 0px;
	margin-right: 5px;
}

.icon {
	height: 20px;
	margin: 0px 5px;
}

.tb {
	display: flex;
	/* justify-content: center; */
	align-items: center;
}

.school {
	display: flex;
	align-items: center;
	font-size: 10px;
}
.creator-name {
	margin-right: 10px;
	font-size: 10px;
	color: var(--font-gray-color);
}
.tb img {
	padding-left: 5px;
}

.bq {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #888;
}
.fbr{
    display: flex;
    align-items: center;
}
.bottom{
    padding: var(--page-padding);
}
.button{
    position: absolute;
    bottom: 20px;
    width: 100%;
}
</style>
